<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-28 11:38:08
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 16:22:12
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\Socket\EventData.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import Status from '@/components/TestStatus/index.vue'
import { CloudSyncOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import TextDataBox from '@/components/TextDataBox/index.vue'
import { socketEventDataAPI } from '@/api/Manual'
import dayjs from 'dayjs'

const status = ref('')
const loading = ref(false)
const list = ref<any>([])
const props = defineProps({
  device: {
    type: String,
    default: ''
  }
})
const formRef = ref()
const form = ref<any>({
  clientId: '',
  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD')
})
const rules: Record<string, Rule> = {
  startTime: {
    required: true,
    validator(_rule, value) {
      if (!value) {
        return Promise.reject('请输入开始时间')
      } else if (
        form.value.endTime &&
        dayjs(value).valueOf() > dayjs(form.value.endTime).valueOf()
      ) {
        return Promise.reject('开始时间不能大于结束时间')
      } else {
        return Promise.resolve()
      }
    }
  },
  endTime: {
    required: true,
    validator(_rule, value) {
      if (!value) {
        return Promise.reject('请输入结束时间')
      } else if (
        form.value.startTime &&
        dayjs(value).valueOf() < dayjs(form.value.startTime).valueOf()
      ) {
        return Promise.reject('结束时间不能小于开始时间')
      } else {
        return Promise.resolve()
      }
    }
  }
}

const handler = async () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  formRef.value.validate().then(() => {
    status.value = ''
    loading.value = true
    form.value.dates = [form.value.startTime, form.value.endTime]
    socketEventDataAPI(form.value)
      .then((res) => {
        status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
        list.value.unshift({
          id: list.value.length ? list.value[0].id + 1 : 1,
          itemId: res.data.itemId,
          time: Date.now(),
          data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
          requestData: res.data.requestData
            ? res.data.requestData.replaceAll('\n', '<br/>')
            : 'null',
          msg: res.data.result,
          resultStatus: res.data.resultStatus
        })
      })
      .finally(() => {
        loading.value = false
      })
  })
}
</script>
<template>
  <div>
    <div>
      <div class="title">事件记录测量数据</div>
      <div class="desc">通过指令方式获取地球物理专用设备的事件记录测量数据。</div>
    </div>

    <div class="content">
      <div class="left">
        <div class="result">
          <div class="result-title">测试结果</div>
          <div class="result-value">
            <Status :status />
          </div>
        </div>
        <div class="info">
          <div class="form">
            <a-button class="mb-10" type="primary" block :loading @click="handler">
              <template #icon>
                <CloudSyncOutlined />
              </template>
              获取
            </a-button>
            <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
              <a-form-item label="开始日期" name="startTime">
                <a-date-picker
                  v-model:value="form.startTime"
                  :disabled-date="(d) => d && d > dayjs().endOf('day')"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请输入开始日期"
                  style="width: 100%"
                />
              </a-form-item>
              <a-form-item label="结束日期" name="endTime">
                <a-date-picker
                  v-model:value="form.endTime"
                  :disabled-date="(d) => d && d > dayjs().endOf('day')"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请输入结束日期"
                  style="width: 100%"
                />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="data-box" style="height: 434px">
          <TextDataBox :list />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.desc {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  line-height: 22px;
  margin: 6px 0 16px;
}

.content {
  display: flex;

  .left {
    width: 200px;

    .result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #d9d9d9;

      &-title {
        font-weight: 600;
        font-size: 16px;
      }

      &-value {
        width: 90px;
        height: 28px;
      }
    }

    .data-title {
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 16px;
      }

      .time {
        font-size: 12px;
        color: #a8abb2;
      }
    }

    .info {
      background: #ffffff;
      border-radius: 4px;
      width: 200px;
      height: 336px;
      overflow-x: hidden;
      overflow-y: auto;
      margin-top: 6px;
      background: #ffffff;
      border-radius: 4px;

      .line {
        width: 1px;
        background: rgba(0, 0, 0, 0.06);
        margin: 0 3px 0 4px;
      }

      .item {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px;

        .label {
          color: rgba(0, 0, 0, 0.85);
          margin-right: 4px;
        }

        .value {
          color: #a8abb2;
        }
      }
    }
  }

  .right {
    margin-left: 10px;
    flex: 1;

    ::v-deep(.ant-btn) {
      height: 28px;
      padding: 2px 8px;
    }
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
